<template>
    <div class="jx-content" id="contain">
        <div class="flexBox">
            <div class="addCourseBtn" @click="addCourse">
                <div >
                    <i class="iconfont icon-jiahao"></i>
                    <p>添加课程</p>
                </div>
            </div>
            <div v-for="(item, index) in courseList" :key="index"  @mouseenter="hoverImg(item)"  @mouseleave="leaveImg(item)"  @click="repeatFn(item.id,item.name)">
                <div class="topArea" :class="{bc2:index%2===0,bc:index%2===1}" >
                    <div>
                        <span class="sign" v-if="item.ownCourse==true">自定义</span>
                         <i class="iconfont icon-Group- closeCourse" @click.stop="deleteFn(item.id)"></i>
                    </div>
                    <div class="imgbox">
                        <img :src='item.iconPath'/>
                    </div>
                </div>
                <div class="downArea">
                    <p class="courseName">{{item.name}}</p>
                    <div class="btnBox">
                        <i class="editCourseBtn"   @click="repeatFn(item.id,item.name)">修改课程</i>
                        <i class="shareResourceBtn" v-if="item.status==2 && item.ownCourse==true" @click.stop="cancelFn(item.id)" >取消共享</i>
                        <i class="shareResourceBtn" @click.stop="shareFn(item.id)" v-if="item.status==1 && item.ownCourse==true">共享资源</i>
                        <i class="borderNone" v-if="item.ownCourse==false && item.fileName" @click.stop="downResouseBox(item.fileName,item.remark)">下载资源包 <b class="iconfont icon-tubiaozhizuo-"></b></i> <!--自定义置灰-->
                        <i class="borderNone dark" v-else-if="item.ownCourse==false && item.fileName==undefined" @click.stop="downResouse">下载资源包 <b class="iconfont icon-tubiaozhizuo-"></b></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                 courseList:[],
                 roleId:''
            }
        },
        created() {
            this.init()
            // 初始化清空
            this.$localstorage.removeLocalStorage('setCourseId','')
            this.$localstorage.removeLocalStorage('CourseTitle','')
            this.roleId=this.$store.state.user.roles[0]
        },
        methods:{
            init(){
               let self = this
                self.$http.get('/tes/course/creation') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.courseList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                })
           },
           //添加课程
            addCourse(){
                    this.$router.push({
                        path: './CreativeCourse/CourseBaseInfo',
                    })
            },
            //鼠标经过变色
            hoverImg(item){
                //    item.iconPath=item.iconPath+'.fan.png'
            },
            //鼠标离开变色
            leaveImg(item){
              //  item.iconPath=item.iconPath.substr(item.iconPath,item.iconPath.lastIndexOf('.', item.iconPath.lastIndexOf('.') - 1) );
            },
           //共享资源
           shareFn(id){
                let self = this
                self.$confirm('确定将课程进行共享?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.put('/tes/course/'+id+'/status?status=2') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '共享成功',
                            type: 'success'
                         })
                         self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                    })
			    })
           },
            //取消共享
            cancelFn(id){
                let self = this
                self.$confirm('确定取消共享资源', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                self.$http.put('/tes/course/'+id+'/status?status=1') .then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.$message({
                            message: '取消成功',
                            type: 'success'
                         })
                         self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                      console.log(err)
                    })
			    })

            },
           //修改课程
           repeatFn(id,name){
                let self = this
                self.$localstorage.putLocalStorage('setCourseId', id) //设置值
                // 添加goTarget 判断是从首页跳转还是创作课程
                self.$localstorage.putLocalStorage("goTarget", 'MakeCourseList');
                self.$localstorage.putLocalStorage('CourseTitle', name)
                if(self.roleId=='TEACHER' || self.roleId == 'MARKET_TEACHER' ||  self.roleId == 'UNIVERSITY_TEACHER' ){
                    self.$router.push({
                        path: '/Teaching/Course/CreativeCourse/CourseBaseInfo',
                    })
                }else if(self.roleId=='SUPER_ADMIN' || self.roleId=='INTERNET_ADMIN'){
                    self.$router.push({
                       path: '/Admin/CreativeCourse/ChapterInfo',
                    })
                }
           },
           //下载资源
           downResouse(){

           },
           //下载资源包
           downResouseBox(fileName,remark){
                let self = this
                self.$http.post('/tes/course/preset-resource/download/permission',{
                    remark :remark ,
                    fileName : fileName
                    }) .then((response) => {
                    let res = response.data
                if(res.code == '200'){
                    self.token=res.data
                    let downloadElement = document.createElement('a');
                    downloadElement.style.display = 'none';
                    downloadElement.href = '/tes/course/preset-resource/download?token='+self.token
                    downloadElement.download = self.versionVideo; //下载后文件名
                    downloadElement.click(); //点击下载
                    //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                })
           },
           //删除方法 //此处等伟明写完班级
        //    commonFn(id){
        //         let self = this
        //         this.$localstorage.putLocalStorage('setCourseId',id)
        //         self.$router.push({
        //             path: './CreativeCourse/CourseBaseInfo',
        //         })
        //     },
            //删除方法 //此处等伟明写完班级
            commonFn(id,message){
                let self = this
                self.$confirm(''+message+',确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.delete('/tes/course/'+id+'?errorDealFlag=true') .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                        }else{
                             self.$message.error(res.message)
                        }
                  
                    })
                }).catch(err => {
      
                     console.log(err)
                })
            },
            //删除课程
            deleteFn(id){
                let self = this
             
                self.$confirm('确定删除吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: "正在删除中...",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)"
                    });
                self.$http.delete('/tes/course/'+id+'?errorDealFlag=') .then((response) => {
                    
                    let res = response.data
                 
                    if(res.code == '200') {
                         self.$message({
                            message: '删除成功',
                            type: 'success'
                         })
                        self.init()
                        loading.close()
                    }else if(res.code == '501'){
                        this.commonFn(id,res.message)
                        loading.close()
                    } else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     loading.close()
                     console.log(err)
                    })
			    })
            }
        }
    }
</script>
<style scoped>
 .bc {
    background:url('../../../assets/images/teacherbg_2.png') no-repeat;
    width: 240px;
    border-radius: 6px;
    height: 136px;
    position: relative;

}
.bc2 {
    background:url('../../../assets/images/teacherbg.png') no-repeat;
    width: 240px;
    border-radius: 6px;
    height: 136px;
    position: relative;
}
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    $yellow:#fea11e;

    .jx-content{
        background: none;
        padding: 0;
        box-shadow: none;
        margin-top: 30px;
        overflow: hidden;
    }
    .flexBox{
        >div{
            width: 240px;
            background: $white;
            height: 280px;
            margin:20px 20px 35px 20px;
            float: left;
            border-radius: $br5;
            box-shadow: $boxShadow;
            transition: transform .3s;
            &:hover{
                transform: scale(1.05);
                transition: transform .3s;
                cursor: pointer;
                box-shadow: 0 0 20px  #e0e0e0;
                .courseTitle{
                    color: $yellow;
                }
                .closeCourse{
                    font-size: 18px!important;
                }
            }
            .topArea{
                height: 136px;
                //background: #495172;
                border-radius:  $br5 $br5 0 0;
                position: relative;
                color: $white;
                .closeCourse{
                    position: absolute;
                    right: 10px;
                    top: 15px;
                    font-size: 18px;
                    display: block;
                    line-height: 9px;
                    cursor: pointer;
                }
                .imgbox{
                    text-align: center;
                    padding-top: 25px;
                    &>img{
                        width: 180px;

                    }
                }
                .courseTitle{
                    display: block;
                    height: 100%;
                    width: 100%;
                    text-align: center;
                    line-height: 136px;
                    font-size: 90px;
                }
                .sign{
                    color: #3e4562;
                    width: 50px;
                    height: 16px;
                    border-radius: 0 20px 20px 0;
                    background: $white;
                    font-size: 10px;
                    display: block;
                    text-align: center;
                    line-height: 16px;
                    position: absolute;
                    left: 0;
                    top: 12px;
                }
            }
            .downArea{
                height: 100px;
                padding: 24px;
                position: relative;
                p{
                    font-size: 16px;
                    text-align: center;
                    line-height: 1.7;
                    //  word-break: break-all;
                    // text-overflow: ellipsis;
                    // display: -webkit-box;
                    // -webkit-box-orient: vertical;
                    // -webkit-line-clamp: 2;
                    // overflow: hidden;
                }
                .btnBox{
                    position: absolute;
                    bottom: 24px;
                    left: 0;
                    width: 100%;
                    height: 30px;
                    text-align: center;
                    .darkBtn{
                        color: #939393;
                        border: 1px solid #939393
                    }
                    .borderNone{
                        border: none;
                    }
                    .dark{
                        color: #939393;
                    }
                    .icon-tubiaozhizuo-{
                        font-size: 14px;
                    }
                    i{
                        width: 90px;
                        height: 30px;
                        border: 1px solid #c4cee1;
                        line-height: 30px;
                        text-align: center;
                        color: $yBlue;
                        display: inline-block;
                        cursor: pointer;
                    }
                    .editCourseBtn{
                        margin-right: 10px;

                    }
                }
            }
        }
        .addCourseBtn{
            border: 1px dashed #d9d9d9;
            width: 238px;
            height: 278px;
            >div{
                color: #8f8f8f;
                text-align: center;
                i{
                    margin-top: 112px;
                    display: inline-block;
                    font-size: 14px;
                }
            }
            &:hover{
                border: 1px dashed #385899;
                i{
                    color: #385899;
                }
                p{
                    color: #385899
                }
            }
        }

    }
</style>


